<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer CMS - 后台管理系统</title> 
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">备份/还原</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">备份/还原</li>
			<li style="float: right;"><a href="/admin/database/toRestore">数据还原</a></li>
		</ul>
		<div class="clearFix"></div>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
    <div class="panel-body table-responsive">
		<table class="table table-hover">
			<thead>
				<tr>
					<th style="width:50px;">
						<input type="checkbox" class="flat-grey list-child" />
					</th>
					<th>表名称</th>
					<th style="width:300px;">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="item,stat : ${tables}">
					<td><input type="checkbox" class="flat-grey list-child" th:value="${item}" /></td>
					<td th:text="${item}"></td>
					<td>
						<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-success" th:tableName="${item}" th:onclick="backup(this.getAttribute('tableName'));" shiro:hasAnyPermissions="system:database:backup">备份</a>
						<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-success" th:tableName="${item}" th:onclick="struct(this.getAttribute('tableName'));" shiro:hasAnyPermissions="system:database:struct">结构</a>
					</td>
				</tr>
				<tr th:if="${#lists.isEmpty(tables)}">
					<td colspan="4" align="center">无数据</td>
				</tr>
			</tbody>
		</table>
    </div>
</section>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="struct-dialog" class="modal fade">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">表结构</h4>
            </div>
            <div class="modal-body">
				<pre id="codeEditor" class="ace_editor" style="min-height:400px">
                	<textarea name="content" class="ace_text-input"></textarea>
                </pre>
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 2.0.2 -->
<script src="/resource/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/resource/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/resource/js/plugins/iCheck/icheck.min.js"></script>
<script src="/resource/js/coco-message/coco-message.js"></script>
<script src="/resource/js/aceeditor/ace.js" charset="utf-8"></script>
<script src="/resource/js/aceeditor/ext-language_tools.js" charset="utf-8"></script>
<script>
	var editor = null;
	window.onload = function(){
		//初始化对象
    	editor = ace.edit("codeEditor");
    	//设置风格和语言（更多风格和语言，请到github上相应目录查看）
    	theme = "monokai";
    	language = "sql";
    	editor.setTheme("ace/theme/" + theme);
    	editor.session.setMode("ace/mode/" + language);
    	//字体大小
    	editor.setFontSize(16);
    	//设置只读（true时只读，用于展示代码）
    	editor.setReadOnly(false);
    	//自动换行,设置为off关闭
    	editor.setOption("wrap", "free");
    	//启用提示菜单
    	//ace.require("ace/ext/language_tools");
    	editor.setOptions({
    		//enableBasicAutocompletion: true,
    		//enableSnippets: true,
    		//enableLiveAutocompletion: true
    	});
		renderCheckBox();
	}
	
	function renderCheckBox(){
		$('input').on('ifChecked', function(event) {
		    $(this).parents('li').addClass("task-done");
		    console.log('ok');
		});
		$('input').on('ifUnchecked', function(event) {
		    $(this).parents('li').removeClass("task-done");
		    console.log('not');
		});
		
		$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
		    checkboxClass: 'icheckbox_flat-grey',
		    radioClass: 'iradio_flat-grey'
		});
	}
	
	//备份
	function backup(tableName){
		$.ajax({
			url : "/admin/database/backup",
			contentType : 'application/json',
			data : {tableName: tableName},
			type : "GET",
			dataType : "JSON",
			success : function(result) {
				if(result.success){
					cocoMessage.success(result.info);
				}else{
					cocoMessage.error(result.info);
				}
			},
			error: function(err){
				if(err.status == 403){
					window.location.href = "/exception/403"
				}
			}
		});
	}
	
	//查询表结构
	function struct(tableName){
		$.ajax({
			url : "/admin/database/showStruct",
			contentType : 'application/json',
			data : {tableName: tableName},
			type : "GET",
			dataType : "JSON",
			success : function(result) {
				if(result.success){
					editor.setValue(result.data);
					$("#struct-dialog").modal("show");
				}else{
					cocoMessage.error(result.info);
				}
			},
			error: function(err){
				if(err.status == 403){
					window.location.href = "/exception/403"
				}
			}
		});
	}
</script>
</body>
</html>
